<template>
  <div class="dashboard-container">
    <!-- 顶部统计卡片区域 -->
    <div class="stat-card-group">
      <div class="stat-card">
        <div>
          <div style="color: #ccc;font-size: 12px;">
            今日充值(元)
          </div>
          <div style="font-size: 18px;font-weight: bolder;margin-top: 5px;">
            985.3
          </div>
        </div>
      </div>
      <div class="stat-card">
        <div>
          <div style="color: #ccc;font-size: 12px;">
            今日消费(元)
          </div>
          <div style="font-size: 18px;font-weight: bolder;margin-top: 5px;">
            6923.63
          </div>
        </div>
      </div>
      <div class="stat-card">
        <div>
          <div style="color: #ccc;font-size: 12px;">
           今日新用户(人)
          </div>
          <div style="font-size: 18px;font-weight: bolder;margin-top: 5px;">
            312
          </div>
        </div>
      </div>
      <div class="stat-card">
        <div>
          <div style="color: #ccc;font-size: 12px;">
            今日单量(单)
          </div>
          <div style="font-size: 18px;font-weight: bolder;margin-top: 5px;">
            64343
          </div>
        </div>
      </div>
      <div class="stat-card">
        <div>
          <div style="color: #ccc;font-size: 12px;">
            今日充电量(度)
          </div>
          <div style="font-size: 18px;font-weight: bolder;margin-top: 5px;">
            564523
          </div>
        </div>
      </div>
      <div class="stat-card">
        <div>
          <div style="color: #ccc;font-size: 12px;">
            今日退款额(元)
          </div>
          <div style="font-size: 18px;font-weight: bolder;margin-top: 5px;">
            3424.3
          </div>
        </div>
      </div>
      <div class="stat-card">
        <div>
          <div style="color: #ccc;font-size: 12px;">
            今日退款单(单)
          </div>
          <div style="font-size: 18px;font-weight: bolder;margin-top: 5px;">
            123
          </div>
        </div>
      </div>
    </div>

    <!-- 中间图表与信息区域（左中右布局） -->
    <div class="middle-section">
      <!-- 左侧：销售统计、用户统计、充值统计、设备统计 -->
      <div class="left-col">
        <!-- 销售统计：真实折线图 -->
        <div class="chart-card">
          <h3>销售统计</h3>
          <!-- ECharts 容器：必须指定宽高 -->
          <div class="echarts-box" ref="salesChart"></div>
        </div>
        <!-- 用户统计：真实折线图 -->
        <div class="chart-card">
          <h3>用户统计</h3>
          <div class="echarts-box" ref="userChart"></div>
        </div>
        <!-- 充值统计：真实折线图 -->
        <div class="chart-card">
          <h3>充值统计</h3>
          <div class="echarts-box" ref="rechargeChart"></div>
        </div>
        <!-- 设备统计表格 -->
        <div class="table-card">
          <h3>设备统计</h3>
          <table class="device-table">
            <thead>
              <tr>
                <th>序号</th>
                <th>充电桩编号</th>
                <th>有效端口</th>
                <th>金额</th>
                <th>耗电量</th>
                <th>使用频次</th>
                <th>损坏端口</th>
                <th>运行状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="item">
                <td>{{ item }}</td>
                <td>2023101{{ item }}</td>
                <td>{{ item % 2 === 0 ? 2 : 1 }}</td>
                <td>{{ (Math.random() * 5000).toFixed(2) }}</td>
                <td>{{ (Math.random() * 5000).toFixed(2) }}</td>
                <td>{{ 10 + Math.floor(Math.random() * 50) }}</td>
                <td>0</td>
                <td>
                  <i class="icon-wifi" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 右侧：公告、设备类型占比、设备异常分类、小区使用率 -->
      <div class="right-col">
        <div class="info-card">
          <h3>公告(5) 告警(3) <span class="view-more">查看更多</span></h3>
          <ul class="notice-list">
            <li v-for="i in 5" :key="i">
              天把园公交北站充电站恢复运营的公告 <span class="time">13:22</span>
            </li>
          </ul>
        </div>
        <!-- 设备类型占比：真实饼图 -->
        <div class="chart-card">
          <h3>设备类型占比</h3>
          <div class="echarts-box" ref="deviceTypeChart"></div>
        </div>
        <!-- 设备异常分类：真实柱状图 -->
        <div class="chart-card">
          <h3>设备异常分类</h3>
          <div class="echarts-box" ref="errorTypeChart"></div>
        </div>
        <!-- 小区使用率：真实饼图 -->
        <div class="chart-card">
          <h3>小区使用率</h3>
          <div class="echarts-box" ref="communityChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 ECharts 核心和需要的图表类型（按需引入，减少体积）
import * as echarts from 'echarts/core';
import { LineChart, PieChart, BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 注册所需组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  PieChart,
  BarChart,
  CanvasRenderer
]);

export default {
  name: 'Dashboard',
  mounted() {
    // 页面渲染完成后初始化所有图表
    this.initSalesChart();
    this.initUserChart();
    this.initRechargeChart();
    this.initDeviceTypeChart();
    this.initErrorTypeChart();
    this.initCommunityChart();

    // 监听窗口 resize，让图表自适应
    window.addEventListener('resize', () => {
      this.$refs.salesChart.resize();
      this.$refs.userChart.resize();
      this.$refs.rechargeChart.resize();
      this.$refs.deviceTypeChart.resize();
      this.$refs.errorTypeChart.resize();
      this.$refs.communityChart.resize();
    });
  },
  beforeDestroy() {
    // 销毁窗口监听，避免内存泄漏
    window.removeEventListener('resize', () => { });
  },
  methods: {
    // 1. 销售统计：折线图
    initSalesChart() {
      const chartDom = this.$refs.salesChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: { trigger: 'axis' },
        legend: { data: ['销售额', '退款额'] },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
        },
        yAxis: { type: 'value', name: '金额(元)' },
        series: [
          {
            name: '销售额',
            type: 'line',
            data: [983, 1020, 850, 1100, 920, 1050, 980],
            smooth: true,
            itemStyle: { color: '#409eff' }
          },
          {
            name: '退款额',
            type: 'line',
            data: [85, 70, 90, 60, 80, 75, 82],
            smooth: true,
            itemStyle: { color: '#f98280' }
          }
        ]
      };
      myChart.setOption(option);
      // 把图表实例挂载到 this 上，方便 resize
      this.$refs.salesChart = myChart;
    },

    // 2. 用户统计：折线图
    initUserChart() {
      const chartDom = this.$refs.userChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: { trigger: 'axis' },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
        },
        yAxis: { type: 'value', name: '用户数(人)' },
        series: [
          {
            name: '新用户',
            type: 'line',
            data: [527, 480, 550, 620, 580, 610, 590],
            itemStyle: { color: '#a0d995' }
          }
        ]
      };
      myChart.setOption(option);
      this.$refs.userChart = myChart;
    },

    // 3. 充值统计：折线图
    initRechargeChart() {
      const chartDom = this.$refs.rechargeChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: { trigger: 'axis' },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
        },
        yAxis: { type: 'value', name: '充值额(元)' },
        series: [
          {
            name: '充值金额',
            type: 'line',
            data: [1200, 1350, 1100, 1480, 1320, 1500, 1420],
            itemStyle: { color: '#fbbc88' }
          }
        ]
      };
      myChart.setOption(option);
      this.$refs.rechargeChart = myChart;
    },

    // 4. 设备类型占比：饼图
    initDeviceTypeChart() {
      const chartDom = this.$refs.deviceTypeChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 'left' },
        series: [
          {
            name: '设备类型占比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: { show: false, position: 'center' },
            emphasis: {
              label: { show: true, fontSize: 16, fontWeight: 600 }
            },
            labelLine: { show: false },
            data: [
              { value: 54, name: '双路' },
              { value: 20, name: '单路' },
              { value: 21, name: '十路' },
              { value: 5, name: '十二路' }
            ],
            color: ['#69c0ff', '#f98280', '#fbbc88', '#a0d995']
          }
        ]
      };
      myChart.setOption(option);
      this.$refs.deviceTypeChart = myChart;
    },

    // 5. 设备异常分类：柱状图
    initErrorTypeChart() {
      const chartDom = this.$refs.errorTypeChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: { type: 'category', data: ['过温告警', '充电桩损坏', '接触器故障', '枪口损坏', '离线', '断电'] },
        yAxis: { type: 'value', name: '占比(%)' },
        series: [
          {
            name: '异常占比',
            type: 'bar',
            data: [8.5, 7, 5.0, 3.3, 2.3, 0.5],
            itemStyle: { color: '#c6b4eb' }
          }
        ]
      };
      myChart.setOption(option);
      this.$refs.errorTypeChart = myChart;
    },

    // 6. 小区使用率：饼图
    initCommunityChart() {
      const chartDom = this.$refs.communityChart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 'left' },
        series: [
          {
            name: '小区使用率',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 43.21, name: '和美家园小区' },
              { value: 27.34, name: '御景嘉苑' },
              { value: 11.57, name: '枫丹湾' },
              { value: 13.22, name: '余江庭院' },
              { value: 22.21, name: '枫林湾' }
            ],
            color: ['#409eff', '#f98280', '#fbbc88', '#a0d995', '#c6b4eb']
          }
        ]
      };
      myChart.setOption(option);
      this.$refs.communityChart = myChart;
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  background: #eef2f7;
  padding: 20px;
  // border: 2px solid #ff4d4f; // 红框可根据需要保留
}

// 顶部统计卡片组
.stat-card-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;

  .stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;

    &:before {
      content: '';
      display: inline-block;
      width: 26px; // 图标宽度（与原圆形一致）
      height: 26px; // 图标高度（与原圆形一致）
      margin-right: 8px;
      border-radius: 50%; // 保持圆形裁剪（若图标本身是圆形，可去掉）
      background-size: cover; // 让图片充满容器，不拉伸
      background-position: center; // 图片居中显示
      background-repeat: no-repeat; // 禁止图片重复
    }
  }

  // 替换为你的图标图片路径（支持相对路径、绝对路径、网络图片）
  .stat-card:nth-child(1):before {
    background-image: url('../../../public/recharge.png') // 今日充值图标（示例路径）
  }

  .stat-card:nth-child(2):before {
    background-image: url('../../../public/consume.png'); // 今日消费图标（示例路径）
  }

  .stat-card:nth-child(3):before {
    background-image: url('../../../public/new-user.png'); // 今日新用户图标（示例路径）
  }

  .stat-card:nth-child(4):before {
    background-image: url('../../../public/order.png'); // 今日单量图标（示例路径）
  }

  .stat-card:nth-child(5):before {
    background-image: url('../../../public/power.png'); // 今日充电量图标（示例路径）
  }

  .stat-card:nth-child(6):before {
    background-image: url('../../../public/refund-money.png'); // 今日退款额图标（示例路径）
  }

  .stat-card:nth-child(7):before {
    background-image: url('../../../public/refund-order.png'); // 今日退款单图标（示例路径）
  }
}

// 中间左右布局
.middle-section {
  display: flex;
  gap: 20px;
}

// 左侧列
.left-col {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 右侧列
.right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 图表卡片、信息卡片通用样式
.chart-card,
.info-card,
.table-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
  }
}

// ECharts 容器：必须指定宽高！
.echarts-box {
  width: 100%;
  height: 220px; // 适配卡片高度，可根据需要调整
}

// 公告列表
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    font-size: 13px;
    color: #666;
    padding: 8px 0;
    border-bottom: 1px solid #eee;

    .time {
      float: right;
      color: #999;
    }
  }

  .view-more {
    float: right;
    font-size: 13px;
    color: #409eff;
    cursor: pointer;
  }
}

// 设备统计表格
.device-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;

  th,
  td {
    border: 1px solid #eee;
    padding: 8px;
    text-align: center;
  }

  th {
    background: #f5f7fa;
    font-weight: 600;
  }

  .icon-wifi {
    color: #409eff;
  }
}
</style>